<template>
    <div class="user">
        <div class="operate">
            <el-button type="primary" @click="addUser">添加{{ ButName }}</el-button>
            <el-button type="primary" @click="showUser">客户信息</el-button>
            <el-button type="primary" @click="showEmployee">员工信息</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入账号查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>
        </div>
        <div class="userTable">
            <el-table border v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="Id" label="id" width="190" />
                <el-table-column prop="userName" label="账号" width="190" />
                <el-table-column prop="userPass" label="密码" width="190" />
                <el-table-column label="标识" width="190">
                    <template #default="scope">
                        <span v-if="scope.row.Identify==0">管理员</span>
                        <span v-if="scope.row.Identify==1">审核人员</span>
                        <span v-if="scope.row.Identify==2">客户</span>
                        <span v-if="scope.row.Identify==3">客服</span>
                        <span v-if="scope.row.Identify==4">护工</span>
                    </template>
                </el-table-column>
                <el-table-column prop="umail" label="邮箱" width="190" />
                <el-table-column prop="createTime" label="时间" width="150" />
                <el-table-column fixed="right" label="操作" width="190">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleClick(scope)">详情</el-button>
                    <el-button type="danger" size="small" @click="deleteClick(scope)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="pagination.total" />
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="账号">
                        <el-input v-model="fromData.userName" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="fromData.userPass" />
                    </el-form-item>
                    <el-form-item label="身份">
                        <el-select v-model="fromData.Identify" @change="updateIdentify" placeholder="请选择">
                            <el-option label="请选择" value="-1" />
                            <el-option :disabled="disIdentify" label="管理员" value="0" />
                            <el-option :disabled="disIdentify" label="审核人员" value="1" />
                            <el-option :disabled="!disIdentify" label="客户" value="2" />
                            <el-option :disabled="disIdentify" label="医师" value="3" />
                            <el-option :disabled="disIdentify" label="护工" value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="ButName=='客户'" label="部门">
                        <el-select
                            v-model="fromData.deptId"
                            filterable
                            @input="SelectDept"
                            placeholder="请选择部门">
                            <el-option
                                v-for="(item,index) in departs"
                                :key="index"
                                :label="item.name"
                                :value="item.id"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="fromData.umail" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加</el-button>
                        <el-button @click="drawer=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
export default defineComponent({
    data(){
        return{
            searchName:'',
            user:null,
            Identify:'0',
            disIdentify:true,
            loading:true,
            BaseUrlRoot:'login',
            ButName:'客户',
            departs:[],
            tableData:[],
            fromData:{
                "userName":'',
                "userPass":"",
                "Identify":"",
                "deptId":-1,
                "umail":''
            },    
            drawer:false,
            Title:"添加",
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            }
        }
    },
    created () {
        this.user = this.store.state.UserMessage;
        if(this.user==null) return;
        this.LoadData();
        this.SelectDept();
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    methods:{
        LoadData(){
            let self = this;
            let row = self.pageData();
            row.name = null;
            self.$http.post(`${self.baseUrl}/${self.BaseUrlRoot}/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
                self.loading = false;
            })
        },
        showUser(){
            // 显示客户信息
            this.BaseUrlRoot = "login";
            this.LoadData();
            this.ButName = "客户";
            this.disIdentify = true;
        },
        updateIdentify(id){
            this.fromData.Identify = id;
        },
        SelectDept(){
            let self = this;
            let row = {
                name:self.fromData.deptId==-1?null:self.fromData.deptId
            };
            console.log(row)
            self.$http.post(`${self.baseUrl}/deptinfo/selectName`,row).then(res=>{
                let {document} = res.data;
                self.departs = document;
            })
        },
        showEmployee(){
            // 显示员工信息
            this.BaseUrlRoot = "empinfo";
            this.LoadData();
            this.ButName = "员工";
            this.disIdentify = false;
        },
        search(){
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.current = 1;
            self.$http.post(`${self.baseUrl}/${self.BaseUrlRoot}/selectName`,row).then(res=>{
                let {document,end,start,total} = res.data;
                self.tableData = document;
                self.pagination.start = start;
                self.pagination.end = end;
                self.pagination.total = total;
            })
        },
        clickChange(msg){
            this.pagination.current = msg;
            this.LoadData();
        },
        handleClick(msg){
            this.store.commit("BasicUser",msg.row);
            if(this.Identify=='0') this.store.commit("basicManage",true);
            else this.store.commit("basicManage",false);
            this.route.push({
                path:'/userDetail'
            })
        },
        addUser(){
            this.drawer = true;
            this.Title = "添加";
            this.fromData = this.initial();
        },
        deleteClick(msg){
            let self = this;
            ElMessageBox.confirm(`确定要删除此${msg.row.userName}用户吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/${self.BaseUrlRoot}/deleteLogin?id=${msg.row.Id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        onSubmit(){
            let self = this;
            if(self.fromData.Identify == "-1"){
                ElMessage({
                    message:"请选择用户身份",
                    type:'warning'
                })
                return;
            }
            self.$http.post(`${self.baseUrl}/${self.BaseUrlRoot}/addLogin`,self.fromData).then(res=>{
                if(res.data==1){
                    ElMessage({
                        message:"添加成功",
                        type:'success'
                    })
                    self.drawer = false;
                    self.LoadData();
                }
            })
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            return{
                "id":1,
                "userName":"",
                "userPass":"",
                "Identify":"-1",
                "deptId":-1,
                "umail":"",
                "createTime":""
            }
        }
    }
})
</script>
<style scoped>
    .el-table{
        width: 100%;
        height: calc(576px - 15px);
    }
    .el-pagination{
        margin-top: 5px;
    }
    .userTable{
        margin-top: 16px;
    }
    .search{
        float: right;
    }
</style>
